<template>
    <div ref="scrollContainer" class="scroll-container">
        <template v-if="paperList && paperList.length">
            <template v-for="(item, index) of paperList">
                <el-row :gutter="20" class="row">
                    <el-col :span="6" v-for="(paper, key) of item" @click="onPaperInfo(paper)" :key="`${index}-${key}`">
                        <div class="content">
                            <paper-question-card :paper="paper" :show-class-name="showClassName" />
                        </div>
                    </el-col>
                </el-row>
            </template>

            <!-- 加载完成提示 -->
            <div v-if="isLoadAll" class="no-more">没有更多数据了</div>
        </template>

        <!-- 空状态 -->
        <template v-else>
            <el-empty description="暂无数据，请刷新试试！" />
        </template>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, watch } from "vue";
import { useScroll } from "@vueuse/core";
import PaperQuestionCard from "@/views/system/components/paper/PaperQuestionCard.vue";

//获取自定义全局方法
const { http } = inject<any>("method");

//父传子
interface Props {
    uri: string;
    type: string;
    showClassName?: boolean;
    pageSize?: number;
}
const props = withDefaults(defineProps<Props>(), {
    uri: "",
    type: "",
    showClassName: true,
    pageSize: 12,
});

//试卷集合
const paperList = ref<Array<any>>([]);
//滚动容器
const scrollContainer = ref<HTMLElement | null>(null);
//当前页码
const pageNum = ref<number>(0);
//是否加载完所有试卷
const isLoadAll = ref<boolean>(false);
//使用useScroll监听滚动
const { arrivedState } = useScroll(scrollContainer, {
    offset: { bottom: 100 }, // 距离底部100px时触发
});

//监听参数变化
watch([() => props.uri, () => props.type], () => {
    paperList.value = new Array();
    pageNum.value = 0;
    isLoadAll.value = false;
    loadPaperList();
});

//监听是否滚动到底部
watch(
    () => arrivedState.bottom,
    (bottom) => {
        if (bottom && !isLoadAll.value) {
            loadPaperList();
        }
    }
);

//使用defineEmits注册一个自定义事件
const emit = defineEmits(["on-paper-info"]);

//试卷详情
const onPaperInfo = (paper: any) => emit("on-paper-info", paper);

//加载试卷列表
const loadPaperList = async () => {
    if (isLoadAll.value) return;

    const data = await http.get(props.uri, { pageNum: pageNum.value, type: props.type });
    if (data.length < props.pageSize) {
        isLoadAll.value = true; // 如果返回的数据少于12条，认为已经加载完所有试卷
    }
    const groups = [];
    for (let i = 0; i < data.length; i += 4) {
        groups.push(data.slice(i, i + 4));
    }
    paperList.value = [...paperList.value, ...groups];
    pageNum.value += 1;
};
</script>

<style scoped lang="less">
.scroll-container {
    height: calc(100vh - 165px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* 平滑滚动 */

    .row {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        .content {
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            box-shadow: 5px 5px 2px rgba(124, 125, 124, 0.2);
        }
    }

    .no-more {
        text-align: center;
        padding: 10px;
        color: #abaaaa;
        font-size: 14px;
    }

    .loading-more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
}
</style>
